<template>
  <div>
      <h1>useHook</h1>
      <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>      
    <hr>

    <p>Count: {{ count2 }}</p>
    <button @click="increment2">increment2</button>
    <button @click="decrement2">decrement2</button>          
    <hr>

    <p>Count: {{ count3 }}</p>
    <button @click="increment3">increment3</button>
    <button @click="decrement3">decrement3</button>          

    <p>count2和count3都是用的useCounter2</p>

    <h2>使用useWindowSize获取窗口大小</h2>
    <p>width: {{ width }}</p>
    <p>height: {{ height }}</p>

    </div>
</template>

<script setup>
import { reactive,onMounted} from 'vue';
import { useCounter,useCounter2 } from './useCouter'
import { useWindowSize } from './useWindowSize'

const { count, increment, decrement } = useCounter(10); // 使用自定义 hook，初始值为 10
const [count2, increment2, decrement2] = useCounter2(10); // 使用自定义 hook，初始值为 10
const [count3, increment3, decrement3] = useCounter2(10); // 使用自定义 hook，初始值为 10

const {width,height} = useWindowSize()


onMounted(() => {
})
</script>

<style>

</style>